<template>
  <h1>
    图标系统Demo
  </h1>
  <div>
    <h3>svgIcon组件使用示例</h3>
    <svg-icon icon="https://res.lgdsunday.club/user.svg"></svg-icon>
    <svg-icon icon="user"></svg-icon>
  </div>
  <div>
    <h3>css中mask使用示例</h3>
    <div class="mask-demo"></div>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon/index.vue'

defineOptions({
  name: 'DemoPage'
})
</script>

<style lang="scss" scoped>
.mask-demo {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  // 遮罩层mask核心代码
  background-color: red;
  mask: url('https://res.lgdsunday.club/user.svg') 50% 50% no-repeat;
  mask-size: cover !important;
}
</style>
